<template>
  <van-popup v-model:show="show" style="min-width: 340px" class="p-4" round>
    <div class="text-center font-bold mb-2">申请提现</div>
    <div class="">
      <div class="mb-4">
        <div for="type">提现收款信息：</div>
        <select
          @change="changeType"
          v-model="formRef.id"
          name="type"
          id="type"
          class="border p-1 rounded w-full"
        >
          <option v-for="item in lists" :key="item.id" :value="item.id">
            {{ item.name }}
          </option>
        </select>
      </div>

      <div class="mb-2">
        <div for="name">收款姓名</div>
        <input
          required
          v-model="formRef.name"
          type="text"
          name="name"
          class="border rounded p-1 w-full"
        />
      </div>

      <div class="mb-2">
        <div for="account">收款账号</div>
        <input
          required
          v-model="formRef.card"
          type="text"
          name="account"
          class="border rounded p-1 w-full"
        />
      </div>

      <div class="mb-2" v-if="formRef.type == 2">
        <div for="amount">开户行</div>
        <input
          required
          v-model="formRef.bankName"
          type="text"
          name="account"
          class="border rounded p-1 w-full"
        />
      </div>

      <div class="mb-4">
        <div class="flex justify-between">
          提现金额
          <span class="text-sm"
            >可用余额：<span class="text-red-500">{{ getUserInfo.balance.balance }}</span></span
          >
        </div>
        <input
          v-model="formRef.amount"
          type="number"
          name="amount"
          class="border rounded p-1 w-full"
        />
        <div>
          提现申请：（最低{{ AmountRand.withdrawalMin }}） （最高{{ AmountRand.withdrawalMax }}）
        </div>
      </div>

      <div class="mb-4">
        <div for="remark">备注</div>
        <input
          v-model="formRef.remark"
          type="text"
          name="remark"
          class="border rounded p-1 w-full"
        />
      </div>
    </div>
    <div class="m-2 flex justify-between">
      <button
        @click="show = false"
        class="border border-white rounded text-black bg-gray-100 px-4 py-1"
      >
        返回
      </button>
      <button @click="submit" class="border border-white rounded text-white bg-blue-500 px-4 py-1">
        申请提现
      </button>
    </div>
  </van-popup>
</template>

<script setup lang="ts">
import { computed, defineEmits, ref, onMounted } from 'vue'
import { GetBankListApi, GetPaymentListApi, WithdrawalAddApi } from '@/apis/withdrawal'
import { useUserStore } from '@/stores/user'
import { showToast } from 'vant'

const { getUserInfo } = useUserStore()

const emit = defineEmits(['update:show-modal', 'ok'])
const formRef = ref({
  id: null,
  amount: 0,
  remark: ''
})
const lists = ref([])
const AmountRand = ref({
  withdrawalMax: 0,
  withdrawalMin: 0
})
const bankList = ref({})

const props = defineProps({
  showModal: {
    type: Boolean,
    default: false
  }
})

const show = computed({
  get() {
    return props.showModal || false
  },
  set(val) {
    emit('update:show-modal', val)
  }
})

onMounted(() => {
  GetBankListApi().then((res) => {
    bankList.value = res.list
    AmountRand.value = {
      withdrawalMax: res.withdrawalMax,
      withdrawalMin: res.withdrawalMin
    }
  })
  GetPaymentListApi({}).then((res) => {
    const { list } = res
    lists.value = list
  })
})

function submit() {
  WithdrawalAddApi(formRef.value).then(() => {
    showToast({
      type: 'success',
      message: '申请成功'
    })
    show.value = false
    emit('ok')
  })
}

function changeType() {
  lists.value.forEach((element) => {
    if (element.id == formRef.value.id) {
      formRef.value.name = element.name
      formRef.value.card = element.card
      formRef.value.bankId = element.bankId
      formRef.value.bankName = bankList.value[element.bankId]
      formRef.value.type = element.type
    }
  })
}
</script>
